<template>
  <view class="container">
    <!-- 1. 轮播图（动态imgList） -->
    <view class="carousel">
      <swiper indicator-dots circular duration="400">
        <swiper-item class="swiper-item" v-for="(item, index) in imgList" :key="index">
          <image :src="item.src || '/static/temp/default.png'" mode="aspectFill" />
        </swiper-item>
      </swiper>
    </view>

    <!-- 2. 商品简介（动态标题、价格、销量） -->
    <view class="section-intro">
      <text class="text-title">{{ productTitle }}</text>
      <view class="price-group">
        <text class="text-price-symbol">¥</text>
        <text class="text-price-main">{{ productPrice }}</text>
        <text class="text-price-original">¥{{ marketPrice }}</text>
        <!-- 折扣标签（区分秒杀/普通场景） -->
        <text class="tag-discount" v-if="isFromSeckill">8折</text>
        <text class="tag-discount" v-else-if="marketPrice > 0">
          {{ Math.round((productPrice / marketPrice) * 10) }}折
        </text>
      </view>
      <view class="stats-group">
        <text class="text-stat">销量: {{ saleNum }}</text>
        <text class="text-stat">库存: {{ stock }}</text>
        <text class="text-stat">浏览量: {{ viewCount }}</text>
      </view>
    </view>

    <!-- 3. 分享提示栏 -->
    <view class="section-share-bar" @click="share">
      <view class="share-icon-wrap">
        <text class="icon yticon icon-xingxing"></text>
        <text class="text-share-back">返回</text>
      </view>
      <text class="text-share-tip">该商品分享可领49减10红包</text>
      <text class="icon yticon icon-bangzhu1"></text>
      <view class="btn-share">
        立即分享
        <text class="icon yticon icon-you"></text>
      </view>
    </view>

    <!-- 4. 规格选择区域（动态规格数据） -->
    <view class="section-spec-list">
      <view class="spec-item" @click="toggleSpec">
        <text class="text-spec-label">购买类型</text>
        <view class="spec-selected-wrap">
          <text class="text-spec-selected" v-for="(sItem, sIndex) in specSelected" :key="sIndex">
            {{ sItem.name }}
          </text>
        </view>
        <text class="icon yticon icon-you"></text>
      </view>
      <view class="spec-item">
        <text class="text-spec-label">优惠券</text>
        <text class="text-spec-content text-red">领取优惠券</text>
        <text class="icon yticon icon-you"></text>
      </view>
      <view class="spec-item">
        <text class="text-spec-label">促销活动</text>
        <view class="spec-content-list">
          <text class="text-spec-content">新人首单送20元无门槛代金券</text>
          <text class="text-spec-content">订单满50减10</text>
          <text class="text-spec-content">订单满100减30</text>
          <text class="text-spec-content">单笔购买满两件免邮费</text>
        </view>
      </view>
      <view class="spec-item">
        <text class="text-spec-label">服务</text>
        <view class="spec-content-wrap">
          <text class="text-spec-content">7天无理由退换货 ·</text>
          <text class="text-spec-content">假一赔十 ·</text>
        </view>
      </view>
    </view>

    <!-- 5. 评价区域 -->
    <view class="section-evaluation">
      <view class="evaluation-header">
        <text class="text-evaluation-title">评价</text>
        <text class="text-evaluation-count">(86)</text>
        <text class="text-evaluation-rate">好评率 100%</text>
        <text class="icon yticon icon-you"></text>
      </view>
      <view class="evaluation-item">
        <image 
          class="img-portrait" 
          src="http://img3.imgtn.bdimg.com/it/u=1150341365,1327279810&fm=26&gp=0.jpg" 
          mode="aspectFill"
        ></image>
        <view class="evaluation-content">
          <text class="text-evaluation-name">Leo yo</text>
          <text class="text-evaluation-desc">商品收到了，79元两件，质量不错，试了一下有点瘦，但是加个外罩很漂亮，我很喜欢</text>
          <view class="evaluation-meta">
            <text class="text-evaluation-attr">购买类型：XL 红色</text>
            <text class="text-evaluation-time">2019-04-01 19:21</text>
          </view>
        </view>
      </view>
    </view>

    <!-- 6. 图文详情 -->
    <view class="section-detail">
      <view class="detail-header">
        <text class="text-detail-title">图文详情</text>
      </view>
      <rich-text :nodes="desc"></rich-text>
    </view>

    <!-- 7. 底部操作菜单 -->
    <view class="bottom-nav">
      <navigator url="/pages/index/index" open-type="switchTab" class="bottom-nav-item">
        <text class="icon yticon icon-xiatubiao--copy"></text>
        <text class="text-nav-item">首页</text>
      </navigator>
      <navigator url="/pages/cart/cart" open-type="switchTab" class="bottom-nav-item">
        <text class="icon yticon icon-gouwuche"></text>
        <text class="text-nav-item">购物车</text>
      </navigator>
      <view class="bottom-nav-item btn-collect" @click="toggleCollect">
        <text 
          class="icon yticon" 
          :class="{ 
            'icon-shoucang_xuanzhongzhuangtai': isCollected, 
            'icon-shoucang': !isCollected,
            'icon-red': isCollected  // 已收藏时添加红色类
          }"
        ></text>
        <text class="text-nav-item" :class="{ 'text-red': isCollected }">
          {{ isCollected ? '已收藏' : '收藏' }}
        </text>
      </view>
      <view class="bottom-btn-group">
        <button type="primary" class="btn-bottom buy-now-btn" @click="buy">立即购买</button>
        <button type="primary" class="btn-bottom add-cart-btn">加入购物车</button>
      </view>
    </view>

    <!-- 8. 规格弹窗（动态数据） -->
    <view class="popup spec-popup" :class="specClass" @touchmove.stop.prevent="stopPrevent" @click="toggleSpec">
      <view class="popup-mask"></view>
      <view class="popup-content" @click.stop="stopPrevent">
        <!-- 弹窗头部 -->
        <view class="popup-header">
          <image 
            :src="(imgList[0] && imgList[0].src) || '/static/temp/default.png'" 
            class="img-popup-header" 
            mode="aspectFill"
          ></image>
          <view class="popup-header-info">
            <text class="text-popup-price">¥{{ productPrice }}</text>
            <text class="text-popup-stock">库存：{{ stock }}件</text>
            <view class="popup-selected-wrap">
              已选：
              <text class="text-popup-selected" v-for="(sItem, sIndex) in specSelected" :key="sIndex">
                {{ sItem.name }}
              </text>
            </view>
          </view>
        </view>

        <!-- 规格组列表 -->
        <view v-for="(item, index) in specList" :key="index" class="popup-spec-group">
          <text class="text-spec-group-label">{{ item.name }}</text>
          <view class="popup-spec-option-list">
            <text 
              v-for="(childItem, childIndex) in specChildList" 
              v-if="childItem.pid === item.id"
              :key="childIndex" 
              class="text-spec-option"
              :class="{ 'spec-option-selected': childItem.selected }"
              @click="selectSpec(childIndex, childItem.pid)"
            >
              {{ childItem.name }}
            </text>
          </view>
        </view>

        <button class="btn-popup-confirm" @click="toggleSpec">完成</button>
      </view>
    </view>

    <!-- 分享组件 -->
    <share 
      ref="share" 
      :contentHeight="580"
      :shareList="shareList"
    ></share>
  </view>
</template>

<script>
import api from '@/utils/api.js';
import share from '@/components/share.vue';
import { getToken } from '@/utils/auth.js'; // 引入获取 Token 的方法

export default{
  components: { share },
  data() {
    return {
      isFromSeckill: false, 
      specClass: 'none', // 规格弹窗状态：none/hide/show
      specSelected: [], // 选中的规格
      shareList: [], // 分享列表
      // 商品详情动态数据（从接口获取）
      product: null, // 商品完整信息（暂存）
      imgList: [], // 轮播图列表
      productTitle: '', // 商品标题
      productPrice: '0.00', // 售价（元）
      marketPrice: '0.00', // 原价（元）
      saleNum: 0, // 销量
      stock: 0, // 库存
      viewCount: 0, // 浏览量
      desc: '', // 图文详情（rich-text节点）
      specList: [], // 规格组（如：尺寸、颜色）
      specChildList: [], // 规格选项（如：XS、白色）
      spuId: '', // 当前商品ID（从路由参数获取）
      isCollected: false, // 是否已收藏
    };
  },
  async onLoad(options) {
    this.spuId = options.id; // 获取商品ID
    this.isFromSeckill = options.isFromSeckill === 'true'; // 接收并转换为布尔值

    if (!this.spuId) {
      uni.showToast({ title: '商品不存在', icon: 'none' });
      setTimeout(() => uni.navigateBack(), 1500);
      return;
    }

    try {
      // 加载商品详情
      const response = await api.getProductDetail(this.spuId);
      const productData = response.data; // 取出嵌套的商品数据
      this.product = productData;
      this.parseProductData(productData); // 解析商品数据
      this.initSpecSelected(); // 初始化规格选中状态
      
      // 商品详情加载成功后，再查询收藏状态（失败不影响页面显示）
      this.checkCollectStatus();
    } catch (error) {
      console.error('商品详情加载失败：', error);
      uni.showToast({ title: error.message || '加载失败', icon: 'none' });
      setTimeout(() => {
        const pages = getCurrentPages();
        if (pages.length > 1) {
          uni.navigateBack(); // 有上一页则返回
        } else {
          uni.switchTab({ url: '/pages/index/index' }); // 无则跳首页
        }
      }, 1500);
    }
  },
  methods: {
	  // 检查收藏状态
	  checkCollectStatus() {
	    api.checkCollect(this.spuId).then(res => {
			console.log('checkCollect 接口返回完整数据：', res);
	      if (res.code === 200) {
	        this.isCollected = res.data.isCollected;
	      }
	    }).catch(error => {
	      console.error('查询收藏状态失败：', error);
	    });
	  },
	  
	  // 切换收藏状态
	  toggleCollect() {
	    // 先检查是否登录
	    const token = getToken();
	    if (!token) {
	      uni.navigateTo({ url: '/pages/public/login' });
	      return;
	    }
	  
	    // 执行收藏/取消收藏逻辑
	    const apiMethod = this.isCollected ? api.cancelCollect : api.addCollect;
	    apiMethod(this.spuId).then(res => {
	      if (res.code === 200) {
	        this.isCollected = !this.isCollected;
	        uni.showToast({
	          title: this.isCollected ? '收藏成功' : '取消收藏',
	          icon: 'none'
	        });
	      }
	    }).catch(error => {
	      console.error('收藏操作失败：', error);
	      uni.showToast({ title: '操作失败', icon: 'none' });
	    });
	  },
    // 解析商品数据并绑定到页面变量
    parseProductData(data) {
      // 轮播图（接口返回逗号分隔的URL字符串）
     this.imgList = data.mainImgUrl 
         ? data.mainImgUrl.split(',').map(src => ({ src: src.trim() })) 
         : [];
      // 价格（分转元，区分秒杀/普通场景）
      if (this.isFromSeckill) {
        this.productPrice = (data.priceFee * 0.8 / 100).toFixed(2);
        this.marketPrice = (data.priceFee / 100).toFixed(2);
      } else {
        this.productPrice = (data.priceFee / 100).toFixed(2);
        this.marketPrice = (data.marketPriceFee / 100).toFixed(2);
      }
      // 基本信息
      this.productTitle = data.name || '未知商品';
      this.saleNum = data.saleNum || 0;
      this.stock = data.stock || 0;
      this.viewCount = data.viewCount || 0;
      // 图文详情（默认空容器，避免富文本报错）
      this.desc = `<div style="width:100%">${data.detailHtml || ''}</div>`;
      // 规格数据（接口返回的规格组和选项）
      this.specList = data.specGroups || [];
      this.specChildList = data.specOptions || [];
    },
    // 初始化规格选中状态（默认选中每组第一个规格）
    initSpecSelected() {
      this.specSelected = [];
      this.specList.forEach(group => {
        const firstOption = this.specChildList.find(option => option.pid === group.id);
        if (firstOption) {
          this.$set(firstOption, 'selected', true);
          this.specSelected.push(firstOption);
        }
      });
    },
    // 规格弹窗开关
    toggleSpec() {
      if (this.specClass === 'show') {
        this.specClass = 'hide';
        setTimeout(() => { this.specClass = 'none'; }, 250);
      } else if (this.specClass === 'none') {
        this.specClass = 'show';
      }
    },
    // 选择规格
    selectSpec(index, pid) {
      // 先取消同组其他选项的选中状态
      this.specChildList.forEach(item => {
        if (item.pid === pid) this.$set(item, 'selected', false);
      });
      // 选中当前选项
      this.$set(this.specChildList[index], 'selected', true);
      // 更新已选规格列表
      this.specSelected = this.specChildList.filter(item => item.selected);
    },
    // 立即购买（跳转订单页）
    buy() {
      const productData = {
        id: this.product.spuId,
        title: this.productTitle,
        price: this.productPrice,
        image: this.imgList[0]?.src || '',
        spec: this.specSelected.map(item => item.name).join(' '),
        quantity: 1,
        // 补充默认值，避免订单页报错
        shopId: this.product.shopId || 1,
        skuId: this.product.skuId || this.product.spuId,
        spuId: this.product.spuId,
        shopName: this.product.shopName || '默认店铺'
      };
      uni.navigateTo({
        url: `/pages/order/createOrder?productData=${encodeURIComponent(JSON.stringify(productData))}`
      });
    },
    // 阻止弹窗内部滚动穿透
    stopPrevent() {},
    // 分享（调用组件）
    share() {
      if (this.shareList?.length) {
        this.$refs.share.toggleMask();
      } else {
        uni.showToast({ title: '分享内容加载中', icon: 'none' });
      }
    }
  }
}
</script>

<style lang='scss'>
/* ================================= 公共样式变量（统一规范）================================= */
$color-primary: #fa436a; // 主色（红色）
$color-primary-light: #fbebee; // 主色浅背景
$color-text-dark: #333333; // 文字深灰
$color-text-base: #666666; // 文字中灰
$color-text-light: #999999; // 文字浅灰
$color-white: #ffffff; // 白色
$color-bg-base: #f5f5f5; // 页面背景色
$color-bg-card: #ffffff; // 卡片背景色

$font-size-xs: 20upx; // 超小字体
$font-size-sm: 22upx; // 小字体
$font-size-base: 24upx; // 基础字体
$font-size-lg: 28upx; // 大字体
$font-size-xl: 32upx; // 超大字体

$spacing-xs: 8upx; // 超小间距
$spacing-sm: 16upx; // 小间距
$spacing-base: 20upx; // 基础间距
$spacing-lg: 30upx; // 大间距

$radius-sm: 8upx; // 小圆角
$radius-base: 16upx; // 基础圆角
$radius-lg: 30upx; // 大圆角
$radius-full: 100upx; // 全圆角

$shadow-base: 0 4upx 12upx rgba(0, 0, 0, 0.05); // 基础阴影
$shadow-lg: 0 8upx 24upx rgba(0, 0, 0, 0.1); // 大阴影

/* ================================= 基础重置样式 ================================= */
page {
  background: $color-bg-base;
  padding-bottom: 160upx; // 底部导航占位
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
}

/* 图标统一样式 */
.icon {
  font-size: $font-size-base;
  color: $color-text-light;
}

/* 图片统一样式 */
.img-cover {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* 按钮统一重置 */
button {
  border: none;
  background: transparent;
  &::after {
    border: none;
  }
}

/* ================================= 页面模块样式 ================================= */
/* 1. 轮播图 */
.carousel {
  height: 722upx;
  swiper {
    height: 100%;
  }
  .swiper-item {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100%;
    overflow: hidden;
  }
  .image-wrapper {
    width: 100%;
    height: 100%;
  }
}

/* 2. 商品简介 */
.section-intro {
  background: $color-bg-card;
  padding: $spacing-base $spacing-lg;
  margin-bottom: $spacing-sm;

  .text-title {
    display: block;
    font-size: $font-size-xl;
    color: $color-text-dark;
    line-height: 50upx;
    margin-bottom: $spacing-xs;
  }

  .price-group {
    display: flex;
    align-items: baseline;
    margin-bottom: $spacing-xs;

    .text-price-symbol {
      font-size: $font-size-lg;
      color: $color-primary;
      margin-right: $spacing-xs;
    }

    .text-price-main {
      font-size: $font-size-xl;
      color: $color-primary;
      font-weight: 600;
    }

    .text-price-original {
      font-size: $font-size-sm;
      color: $color-text-light;
      text-decoration: line-through;
      margin: 0 $spacing-base;
    }

    .tag-discount {
      padding: 4upx $spacing-xs;
      background: $color-primary;
      color: $color-white;
      font-size: $font-size-xs;
      border-radius: $radius-sm;
      line-height: 1;
      transform: translateY(-4upx);
    }
  }

  .stats-group {
    display: flex;
    align-items: center;
    height: 50upx;

    .text-stat {
      flex: 1;
      font-size: $font-size-sm;
      color: $color-text-light;
    }
  }
}

/* 3. 分享提示栏 */
.section-share-bar {
  display: flex;
  align-items: center;
  padding: $spacing-xs $spacing-lg;
  background: linear-gradient(to right, #fdf5f6, #fbebf6);
  margin-bottom: $spacing-sm;

  .share-icon-wrap {
    display: flex;
    align-items: center;
    width: 70upx;
    height: 30upx;
    border: 1px solid $color-primary;
    border-radius: $radius-sm;
    position: relative;
    overflow: hidden;
    margin-right: $spacing-xs;

    .icon-xingxing {
      position: relative;
      z-index: 1;
      font-size: $font-size-sm;
      color: $color-white;
      margin: 0 $spacing-xs;
    }

    .text-share-back {
      position: relative;
      z-index: 1;
      font-size: $font-size-xs;
      color: $color-primary;
    }

    &::after {
      content: '';
      position: absolute;
      left: -20upx;
      top: -12upx;
      width: 50upx;
      height: 50upx;
      border-radius: 50%;
      background: $color-primary;
    }
  }

  .text-share-tip {
    flex: 1;
    font-size: $font-size-base;
    color: $color-text-base;
  }

  .icon-bangzhu1 {
    font-size: $font-size-lg;
    padding: 0 $spacing-xs;
  }

  .btn-share {
    font-size: $font-size-sm;
    color: $color-primary;
    display: flex;
    align-items: center;

    .icon-you {
      font-size: $font-size-xs;
      color: $color-primary;
      margin-left: $spacing-xs;
    }
  }
}

/* 4. 规格选择区域 */
.section-spec-list {
  background: $color-bg-card;
  margin-bottom: $spacing-sm;

  .spec-item {
    display: flex;
    align-items: center;
    padding: $spacing-base $spacing-lg;
    border-bottom: 1px solid #eee;

    .text-spec-label {
      width: 140upx;
      font-size: $font-size-base;
      color: $color-text-base;
    }

    .spec-selected-wrap,
    .spec-content-wrap {
      flex: 1;
      font-size: $font-size-base;
      color: $color-text-dark;
    }

    .text-spec-selected,
    .text-spec-content {
      font-size: $font-size-base;
      color: $color-text-dark;
      margin-right: $spacing-base;
    }

    .spec-content-list {
      flex: 1;
      display: flex;
      flex-direction: column;
      line-height: 40upx;
    }

    .text-red {
      color: $color-primary;
    }

    .icon-you {
      font-size: $font-size-base;
      color: $color-text-light;
    }
  }
}

/* 5. 评价区域 */
.section-evaluation {
  background: $color-bg-card;
  padding: $spacing-base $spacing-lg;
  margin-bottom: $spacing-sm;

  .evaluation-header {
    display: flex;
    align-items: center;
    height: 70upx;
    margin-bottom: $spacing-base;

    .text-evaluation-title {
      font-size: $font-size-base;
      color: $color-text-dark;
      margin-right: $spacing-xs;
    }

    .text-evaluation-count {
      font-size: $font-size-sm;
      color: $color-text-light;
      margin-right: $spacing-base;
    }

    .text-evaluation-rate {
      flex: 1;
      font-size: $font-size-sm;
      color: $color-text-light;
      text-align: right;
    }

    .icon-you {
      font-size: $font-size-base;
      color: $color-text-light;
      margin-left: $spacing-xs;
    }
  }

  .evaluation-item {
    display: flex;
    padding-bottom: $spacing-base;

    .img-portrait {
      width: 80upx;
      height: 80upx;
      border-radius: 50%;
      flex-shrink: 0;
      margin-right: $spacing-base;
    }

    .evaluation-content {
      flex: 1;

      .text-evaluation-name {
        font-size: $font-size-base;
        color: $color-text-dark;
        margin-bottom: $spacing-xs;
        display: block;
      }

      .text-evaluation-desc {
        font-size: $font-size-base;
        color: $color-text-dark;
        line-height: 36upx;
        margin-bottom: $spacing-xs;
        display: block;
      }

      .evaluation-meta {
        display: flex;
        justify-content: space-between;
        font-size: $font-size-sm;
        color: $color-text-light;
      }
    }
  }
}

/* 6. 图文详情 */
.section-detail {
  background: $color-bg-card;
  margin-bottom: $spacing-sm;

  .detail-header {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 80upx;
    position: relative;

    .text-detail-title {
      font-size: $font-size-base;
      color: $color-text-dark;
      padding: 0 $spacing-base;
      background: $color-bg-card;
      position: relative;
      z-index: 1;
    }

    &::after {
      content: '';
      position: absolute;
      left: 50%;
      top: 50%;
      transform: translateX(-50%);
      width: 300upx;
      height: 1px;
      background: #eee;
    }
  }

  rich-text {
    padding: 0 $spacing-lg $spacing-base;
  }
}

/* 7. 底部操作菜单 */
.bottom-nav {
  position: fixed;
  left: $spacing-lg;
  right: $spacing-lg;
  bottom: $spacing-lg;
  z-index: 95;
  display: flex;
  align-items: center;
  height: 100upx;
  background: rgba(255, 255, 255, 0.9);
  box-shadow: $shadow-lg;
  border-radius: $radius-base;
  padding: 0 $spacing-sm;

  .bottom-nav-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 96upx;
    height: 80upx;

    .icon {
      font-size: 40upx;
      color: $color-text-light;
      margin-bottom: $spacing-xs;
    }

    .text-nav-item {
      font-size: $font-size-sm;
      color: $color-text-base;
    }

    // 收藏按钮特殊样式
    &.btn-collect {
      .icon-shoucang_xuanzhongzhuangtai {
        color: $color-primary;
      }
      &.active,
      &.active .icon {
        color: $color-primary;
      }
    }
  }

  .bottom-btn-group {
    display: flex;
    height: 76upx;
    border-radius: $radius-full;
    overflow: hidden;
    margin-left: $spacing-base;
    flex: 1;
    max-width: 360upx;
    background: linear-gradient(to right, #ffac30, #fa436a, #F56C6C);
    position: relative;

    // 分割线
    &::after {
      content: '';
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      height: 28upx;
      width: 1px;
      background: rgba(255, 255, 255, 0.5);
    }

    .btn-bottom {
      flex: 1;
      height: 100%;
      font-size: $font-size-base;
      color: $color-white;
      background: transparent;
    }
  }
}

/* 8. 规格弹窗 */
.popup {
  position: fixed;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  z-index: 99;
  display: none;

  // 弹窗显示状态
  &.show {
    display: block;
    .popup-mask {
      animation: showMask 0.2s linear both;
    }
    .popup-content {
      animation: showContent 0.2s linear both;
    }
  }

  // 弹窗隐藏过渡
  &.hide {
    .popup-mask {
      animation: hideMask 0.2s linear both;
    }
    .popup-content {
      animation: hideContent 0.2s linear both;
    }
  }

  // 遮罩层
  .popup-mask {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.4);
    z-index: 1;
  }

  // 弹窗内容
  .popup-content {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    background: $color-bg-card;
    border-radius: $radius-base $radius-base 0 0;
    padding: $spacing-base;
    z-index: 2;
  }

  // 弹窗头部
  .popup-header {
    display: flex;
    margin-bottom: $spacing-lg;

    .img-popup-header {
      width: 170upx;
      height: 170upx;
      border-radius: $radius-sm;
      flex-shrink: 0;
      margin-top: -40upx;
    }

    .popup-header-info {
      flex: 1;
      padding-left: $spacing-base;
      display: flex;
      flex-direction: column;
      justify-content: center;

      .text-popup-price {
        font-size: $font-size-lg;
        color: $color-primary;
        margin-bottom: $spacing-xs;
      }

      .text-popup-stock {
        font-size: $font-size-sm;
        color: $color-text-light;
        margin-bottom: $spacing-xs;
      }

      .popup-selected-wrap {
        font-size: $font-size-sm;
        color: $color-text-base;

        .text-popup-selected {
          color: $color-text-dark;
          margin-right: $spacing-xs;
        }
      }
    }
  }

  // 规格组
  .popup-spec-group {
    margin-bottom: $spacing-lg;

    .text-spec-group-label {
      font-size: $font-size-base;
      color: $color-text-dark;
      margin-bottom: $spacing-sm;
      display: block;
    }

    .popup-spec-option-list {
      display: flex;
      flex-wrap: wrap;
    }

    .text-spec-option {
      display: flex;
      align-items: center;
      justify-content: center;
      min-width: 60upx;
      height: 60upx;
      padding: 0 $spacing-base;
      margin-right: $spacing-base;
      margin-bottom: $spacing-base;
      background: #eee;
      border-radius: $radius-full;
      font-size: $font-size-base;
      color: $color-text-dark;
    }

    // 选中的规格
    .spec-option-selected {
      background: $color-primary-light;
      color: $color-primary;
    }
  }

  // 确认按钮
  .btn-popup-confirm {
    width: 100%;
    height: 66upx;
    line-height: 66upx;
    background: $color-primary;
    color: $color-white;
    font-size: $font-size-base;
    border-radius: $radius-full;
    margin-top: $spacing-base;
  }
}

/* 弹窗动画 */
@keyframes showMask {
  0% { opacity: 0; }
  100% { opacity: 1; }
}
@keyframes hideMask {
  0% { opacity: 1; }
  100% { opacity: 0; }
}
@keyframes showContent {
  0% { transform: translateY(100%); }
  100% { transform: translateY(0); }
}
@keyframes hideContent {
  0% { transform: translateY(0); }
  100% { transform: translateY(100%); }
}

.icon-red {
  color: $color-primary !important; // !important 确保覆盖默认图标颜色
}

.text-red {
  color: $color-primary !important; // 已收藏文字也同步变红（可选，增强视觉反馈）
}

// 确保原有收藏图标的默认颜色正确
.bottom-nav-item.btn-collect {
  .icon-shoucang {
    color: $color-text-light; // 未收藏时：浅灰色
  }
  .icon-shoucang_xuanzhongzhuangtai {
    color: $color-text-light; // 先重置选中图标的默认颜色，再通过 icon-red 变红
  }
}
</style>